<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>使用栅格系统拆分一整行</title>

        <!-- 链接外部样式文件 -->
        <link rel="stylesheet" href="cells-float.css">

        <!-- 使用 style 元素 嵌入自定义的 CSS样式  -->

        <style type="text/css">
            h4 { text-align: center ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #ffff00 ; }

            .wrapper { height: 50px ; width: 80%; margin: auto;  border: 1px solid blue ;}
            .wrapper div { height: 50px ; }
        </style>

    </head>
    <body>

        <h4>将父元素整行拆分为两等份</h4>
        <div class="wrapper row">
            <div class="odd cell-12-6"></div>
            <div class="even cell-12-6"></div>
        </div>

        <h4>将父元素整行拆分为三等份</h4>
        <div class="wrapper row">
            <div class="odd cell-12-4"></div>
            <div class="even cell-12-4"></div>
            <div class="odd cell-12-4"></div>
        </div>

        <h4>将父元素整行拆分为四等份</h4>
        <div class="wrapper row">
            <div class="odd cell-12-3"></div>
            <div class="even cell-12-3"></div>
            <div class="odd cell-12-3"></div>
            <div class="even cell-12-3"></div>
        </div>

        <h4>将父元素整行拆分为五等份</h4>
        <div class="wrapper row">
            <div class="odd cell-5-1"></div>
            <div class="even cell-5-1"></div>
            <div class="odd cell-5-1"></div>
            <div class="even cell-5-1"></div>
            <div class="odd cell-5-1"></div>
        </div>

        <h4>将父元素整行拆分为六等份</h4>
        <div class="wrapper row">
            <div class="odd cell-12-2"></div>
            <div class="even cell-12-2"></div>
            <div class="odd cell-12-2"></div>
            <div class="even cell-12-2"></div>
            <div class="odd cell-12-2"></div>
            <div class="even cell-12-2"></div>
        </div>

        <h4>将父元素整行拆分为十等份</h4>
        <div class="wrapper row">
            <div class="cell-12-6 row">
                <div class="odd cell-5-1"></div>
                <div class="even cell-5-1"></div>
                <div class="odd cell-5-1"></div>
                <div class="even cell-5-1"></div>
                <div class="odd cell-5-1"></div>
            </div>
            <div class="cell-12-6 row">
                <div class="even cell-5-1"></div>
                <div class="odd cell-5-1"></div>
                <div class="even cell-5-1"></div>
                <div class="odd cell-5-1"></div>
                <div class="even cell-5-1"></div>
            </div>
        </div>

        <h4>将父元素整行拆分为十二等份</h4>
        <div class="wrapper row">
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
            <div class="odd cell-12-1"></div>
            <div class="even cell-12-1"></div>
        </div>

        <h4>将父元素整行拆分为二十四等份</h4>
        <div class="wrapper row">
        </div>

        <h4>将父元素整行拆分为四十八等份</h4>
        <div class="wrapper row">
        </div>
        
    </body>
</html>